<template>
  <view>
    <view class="hang" v-for="(item,index) in userInfo" :key="index">
      <view class="kuai tou" @click="ToMessage"> 
        <view class="tou_img_bar">
          <image :src="item.url" mode="" class="tou_img"></image>
        </view>
      </view>
      <view class="kuai name">
        <view class="nichen">
          {{item.name}}
        </view>
        <view class="neirong">
          {{item.message}}
        </view>
      </view>
      <view class="kuai time">
        {{item.time}}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userInfo: [
          {
            url:'../../static/image_one/头像 女孩 (1).png',
            name: '潮流玩家',
            message:"哈哈哈哈哈哈",
            time: '12:33'
          },
          {
            url:'../../static/image_one/头像 女孩 (2).png',
            name: '有风的地方',
            message:"你知道吗，有个地方很美",
            time: '11:23'
          },
          {
            url:'../../static/image_one/头像 女孩 (3).png',
            name: '超级暴龙兽',
            message:"世界很好，我会把它摘下送给你",
            time: '09:35'
          }
        ]
      };
    },
    methods: {
      ToMessage() {
          uni.navigateTo({
            url: '/subpkg/Message/Message'
          })
      }
    }
  }
</script>

<style lang="scss">
  .hang {
    height: 130rpx;
    width: 96%;
    margin: 20rpx auto;
    border-radius: 20rpx;
    background-color: #273343;
    .kuai {
      display: inline-block;
    }
    .tou {
      width: 20%;
      // background-color: aqua;
      margin-top: 20rpx;
      .tou_img_bar {
        width: 100rpx;
        height: 100rpx;
        margin: 0 auto;
        border-radius: 150rpx;
        overflow: hidden;
        .tou_img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .name {
      width: 66%;
      height: 100rpx;
      margin-left: 10rpx;
      margin-top: -30rpx;
      .nichen {
        height: 30rpx;
        font-size: 30rpx;
        font-weight: 600;
        color: #ffffff;
      }
      .neirong {
        color: #48809e;
        font-size: 24rpx;
        margin-top: 30rpx;
      }
    }
    .time {
      width: 10%;
      margin-top: -30rpx;
      color: #ffffff;
      font-size: 25rpx;
      // background-color: aquamarine;
    }
  }
</style>
